<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  #stage {
    position: absolute;
    width: 805px;
    height: 300px;
  }

  #container {
    width: 500px;
    height: 281px;
    display: inline-block;
  }

  img {
    position: absolute;
    -webkit-transition: all 2s ease-out;
  }

  .disappear {
    opacity: 0;
  }

  .show {
    opacity: 1;
  }


  .btn-start-container {
    z-index: 1;
    /*display: inline-block;*/
    /*border: 1px solid red;*/
    margin: 110px 210px;
    position: absolute;
    height: 60px;
    width: 85px;
    /*margin: 0 20px;*/
    background: url(img/2.png) no-repeat 0 -60;
  }

  .btn-start-container:hover {
    /*z-index: 1;*/
    /*display: inline-block;*/
    /*border: 1px solid red;*/
  /*  margin: 110px 210px;
    position: absolute;
    height: 60px;
    width: 85px;*/
    /*margin: 0 20px;*/
    background: url(img/2.png) no-repeat 0 0;
  }


</style>

<div id='stage'>
  <div class='btn-start-container'>
  </div>

  <div id ='container'>
    <img src='img/img0.png' class='disappear' />
    <img src='img/img1.png' class='disappear' />
    <img src='img/img2.png' class='disappear' />
    <img src='img/img3.png' class='disappear' />
    <img src='img/img4.png' class='disappear' />
    <img src='img/img5.png' class='disappear' />
    <img src='img/img6.png' class='disappear' />
    <img src='img/img7.png' class='disappear' />
    <img src='img/img8.png' />
  </div>
</div>

<script type="text/javascript">
  var imgs = document.getElementsByTagName('img');
  var index = imgs.length - 1;
  var btn = document.getElementsByClassName('btn-start-container')[0];
  btn.onclick = function() {
    this.style.opacity = 0;
    setTimeout(function() {
      getNext();
    }, 800);
  };

  function getNext() {
    setTimeout(function() {
      getNext();
    }, 3000);

    if(index === 0) return;
    var img = imgs[eval(index)];
    img.className = 'disappear';
    index--;
    img = imgs[eval(index)];
    img.className = 'show';
  }
</script>
